آموزش ايجاد اپلیکیشن های چند صفحه ای در زامارين

اپلیکیشن های چند صفحه ای Xamarin.Forms

درVisual Studio 2019

دانلودsample

دانلود sample در این بخش شما یاد میگیرید چگونه:

• صفحات بیشتری به Xamarin.Forms solution اضافه کنید.
• بین صفحات جابه جایی ایجاد کنید.
• از data binding استفاده کنید تا داده ها را بین UI و data source همگام کنید.

این quickstart به شما کمک میکند که یک اپلیکیشن یک صفحه ای cross platform Xamarin.Forms ، که یک متن را نگهداری و ذخیره میکند، را به یک اپلیکیشن چند صفحه ای که چند متن را نگهداری میکند، تبدیل کنید. شکل نهایی اپلیکیشن به صورت زیر خواهد بود:

پیش نیاز ها:

شما باید با موفقیت بخش پیشین را ( ساخت اپلیکیشن های تک صفحه ای) کامل کرده باشید و یا میتوانید sample بخش قبلی را دانلود کنید و برای شروع این بخش از آن استفاده کنید.

آپدیت اپ با Visual Studio

１. Visual Studio را باز کنید. در پنجره start ، در بخش open recents، Notes solution را انتخاب کنید ( و یا در بخش open a project or solution، فایل مربوط به Notes را باز کنید):

２. در Solution Explorer، بر Notes راست کلیک کنید و Add>New Folder را انتخاب کنید:

３. در Solution Explorer، فایل جدید را Models نام گذاری کنید:

４. در Solution Explorer، فولدر Models را انتخآب کنید و رور آن راست کلیک کنید و Add> New Item… را انتخاب کنید :

５. در بخش Add New Item، به Visual C# Items>Class بروید، فایل جدید را Note نام گذاری کنید و دکمه Add را بزنید:

با این کار در پروژه Notes، در فولدر Models، کلاسی به نام Note ایجاد میشود.

６. در Note.cs، تمام کد های موجود را پاک کنید و کد زیر را جایگزین کنید:

    using System;

    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }

این کلاس یک Note model تعریف میکند که دیتا هر یادداشت را در اپلیکیشن ذخیره میکند.
تغییرات ایجاد شده را ذخیره کنید و از فایل خارج شوید.

７. در Solution Explorer بر روی پروژه Notes راست کلیک کنید و Add>New Items را انتخاب کنید. در این بخش Visual C# Items> Xamarin.Forms > Content Page را انتخآب کنید، فایل جدید را NoteEntryPage نام گذاری کنید ودکمه Add را بزنید:

با این کار یک صفحه جدید به نام NoteEntryPage به فولدر root پروژه اضافه میشود. این صفحه، صفحه دوم اپلیکیشن خواهد بود.

８. در NoteEntryPage.xaml، کد های موجود را پاک کنید و کد زیر را جایگزین کنید:

این کد UI صفحه را تعریف میکند که شامل یک Editor برای وارد کردن متن، دو Button برای save و یا delete کردن فایل میباشد. دو Button افقی در یک Grid قرار دارند و editor و grid عمودی در یک StackLayout واقع اند. علاوه بر این، editor از data binding برای bind کردن مناسب متن Note استفاده میکند. برای اطلاعات بررسی عمیق تر را مطالعه کنید. تغییرات را ذخیره کنید و از فایل خارج شوید.

９. در NoteEntryPage.xaml.cs، کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }

این کد یک Note Instance ذخیره میکند که نمونه ای از یک یادداشت در Binding Content صفحه ذخیره میکند. زمانی که دکمه save زده میشود، eventhandler OnSaveButtonClicked اجرا میشود که یا محتوای Editor را در یک فایل جدید با نام رندم و یا در یک فایل موجود (به شکل آپدیت جدیدی برای فایل) ذخیره میکند. در هر دو حالت فایل در local data folder اپلیکشن ذخیره میشود و و متد به صفحه قبل باز میگردد. زمانی که دکمه Delete زده میشود، OnDeleteButtonClicked event handler اجرا میشود که فایل را حذف میکند، در حالتی که وجود داشته باشد، و به صفحه قبل باز میگردد. برای اطلاعات بیشتر به بررسی عمیق مراجعه کنید. تغییرات را ذخیره کنید و از فایل خارج شوید.

１０. در Solution Explorer، بر پروژه Notes راست کلیک کنید و Add> New Item… را انتخاب کنید و در بخش Add New Item، Visual C# Items> Xamarin.Forms >Content Page را انتخاب کنید. فایل جدید را NotesPage نام گذاری کنید و دکمه Add را بزنید. با این کار یک صفحه به نام NotesPage به Root folder پروژه اضافه کرده اید که این صفحه Root page اپلیکیشن خواهد بود.

１１. در NotesPage.xaml تمام کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

این کد UI صفحه را مشخص میکند که شامل یک ListView و یک ToolbarItem میباشد. List View از data binding برای نمایش هر یادداشتی که در اپلیکیشن بازیابی شود، استفاده میکند و با انتخاب یک یادداشت به NoteEntryPage منتقل میشود که یک یادداشت نمایش داده میشود. برای ایجاد یک یادداشت جدید میتوان به ToolbarItem مراجعه کرد. برای اطلاعات بیشتر Data binding را در بررسی عمیق ببینید. تغییرات را ذخیره کنید و فایل را ببندید.

１２. در NotePage.xaml.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List();
    
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }

این کد عملکرد NotesPage را مشخص میکند. زمانی که صفحه نمایش داده میشود، OnAppearing متد اجرا میشودکه تمام یادداشت هایی که در local data dolder هستند را در ListView جمع میکند. زمانی که ToolbarItem کلیک میشود، OnNoteAddedClicked event handler اجرا میشود این متد ما را به NoteEntryPage منتقل میکند و BindingContext را برای NoteEnteyPage به یک Note جدید تغییر تنظیم میکند. زمانی که یک item از ListView انتخاب شود، OnListViewItemSelected event handler اجرا میشود. این متد ما را به NoteEntryPage منتقل میکند و BindingContext را برای NoteEntryPage به Note موجود برای آن صفحه تغییر میدهد. برای اطلاعات بیشتر Navigation را در بررسی عمیق مطآلعه کنید. تغییرات را ذخیره کنید و ازفایل خارج شوید.

１３. در Solution Explorer روی App.xaml.cs دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:

        using System;
        using System.IO;
        using Xamarin.Forms;
        
        namespace Notes
        {
            public partial class App : Application
            {
                public static string FolderPath { get; private set; }
        
                public App()
                {
                    InitializeComponent();
                    FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                    MainPage = new NavigationPage(new NotesPage());
                }
                // ...
            }
        }
    

این کد namespace را System.IO namespace تعریف میکند و تعاریف static FolderPath را string را مشخص میکند. FolderPath برای ذخیره آدرسی که یادداشت ها در دستگاه در آن ذخیره میشوند، استفاده میشود همچنین این کد FolderPath را App constructor مقدار اولیه میدهد و مقدار اولیه MainPage را NavigationPage ، که نمونه ی NotesPage در آن قرار دارد، قرار میدهد. برای اطلاعات بیشتر بیشتر Navigation را در بررسی عمیق مطآلعه کنید. تغییرات را ذخیره کنید و فایل را ببندید.

１４. در Solution Explorer در پروژه Notes بر روی MainPage.xaml راست کلیک کنید و Delete را بزنید. در دیالوگی که نمایش داده میشود، OK را بزنید تا فایل را از هارد دیسک خود حذف کنید. این کار صفحاتی که دیگر استفاده نمیشوند را حذف میکند.

１５. پروژه را در هر پلتفرم Build و Run کنید. برای راهنمایی میتوانید به فایل قبل مراجعه کنید.(https://docs.microsoft.com/en-us/xamarin/get-started/quickstarts/single-page?pivots=macos#building-the-quickstart)

در NotesPage، دکمه + را بزنید تا به NotesEntryPage منتقل شوید و یک یادداشت وارد کنید. بعد از save یادداشت اپلیکیشن شما را به NotesPage باز میگرداند.

این کار را با تعدادی یادداشت با طول های مختلف انجام دهید و فعالیت اپلیکیشن را مشاهده کنید.

در Visual Studio for Mac

دانلودsample

دانلود sample در این بخش شما یاد میگیرید چگونه:

• صفحات بیشتری به Xamarin.Forms solution اضافه کنید.
• بین صفحات جابه جایی ایجاد کنید.
• از data binding استفاده کنید تا داده ها را بین UI و data source همگام کنید.

این quickstart به شما کمک میکند که یک اپلیکیشن یک صفحه ای cross platform Xamarin.Forms ، که یک متن را نگهداری و ذخیره میکند، را به یک اپلیکیشن چند صفحه ای که چند متن را نگهداری میکند، تبدیل کنید. شکل نهایی اپلیکیشن به صورت زیر خواهد بود:

پیش نیاز ها:

شما باید با موفقیت بخش پیشین را ( ساخت اپلیکیشن های تک صفحه ای) کامل کرده باشید و یا میتوانید sample بخش قبلی را دانلود کنید و برای شروع این بخش از آن استفاده کنید.

آپدیدت اپلیکیشن با Visual Studio for Mac

１. Visual Studio for Mac را باز کنید. در منو start، Open را انتخاب کنید و در دیالوگ ایجاد شده فایل مربوط به پروژه Notes را انتخاب کنید:

２. در Solution Pad، پروژه Notes را انتخاب کنید، راست کلیک کنید وAdd>New Folder را انتخاب کنید:

３. در Solution Pad فایل جدید را Models نام گذاری کنید:

４. در Solution Pad، فولدر Models را انتخاب کنید روی آن راست کلیک کرده و به Add> New File بروید:

５. در دیالوگ New File، General > Empty Class را انتخاب کنید، فایل جددی را Note نام گداری کنید و New را بزنید:

با این کار شما یک کلاس Note به فولدر Model در پروژه Notes اضافه کردید.

６. در Note.cs، تمام کد های موجود را پاک کنید و کد زیر را جایگزین کنید:

    using System;

    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }

این کلاس یک Note model تعریف میکند که اطلاعات هر یادداشت را در اپلیکیشن ذخیره میکند. تغییرات را ذخیره کنید و از فایل خارج شوید.

７. در Solution Pad، پروژه Notes را انتخاب کنید و بر روی آن راست کلیک کنید و Add> New File… را انتخاب کنید. در دیالوگ New File، Forms >FormsContentPage XAML را انتخاب کنید، فایل جدید را NoteEntryPage نام گذاری کنید و New را بزنید:

این کار یک صفحه جدید به نام NoteEntryPage برای فولدر root پروژه ایجاد میکند. این صفحه دومین صفحه اپلیکیشن خواهد بود.

８. در NoteEntryPage.xaml تمام کن های موجود را پاک کنید و کد زیر را جایگزین کنید:

این کد UI صفحه را تعریف میکند که شامل یک Editor برای وارد کردن متن، دو Button برای save و یا delete کردن فایل میباشد. دو Button افقی در یک Grid قرار دارند و editor و grid عمودی در یک StackLayout واقع اند. علاوه بر این، editor از data binding برای bind کردن مناسب متن Note استفاده میکند. برای اطلاعات بررسی عمیق تر را مطالعه کنید. تغییرات را ذخیره کنید و از فایل خارج شوید.

９. در NoteEntryPage.xaml.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }

این کد یک Note Instance ذخیره میکند که نمونه ای از یک یادداشت در Binding Content صفحه ذخیره میکند. زمانی که دکمه save زده میشود، eventhandler OnSaveButtonClicked اجرا میشود که یا محتوای Editor را در یک فایل جدید با نام رندم و یا در یک فایل موجود (به شکل آپدیت جدیدی برای فایل) ذخیره میکند. در هر دو حالت فایل در local data folder اپلیکشن ذخیره میشود و و متد به صفحه قبل باز میگردد. زمانی که دکمه Delete زده میشود، OnDeleteButtonClicked event handler اجرا میشود که فایل را حذف میکند، در حالتی که وجود داشته باشد، و به صفحه قبل باز میگردد. برای اطلاعات بیشتر به بررسی عمیق مراجعه کنید. تغییرات را ذخیره کنید و از فایل خارج شوید.

１０. در Solution Pad پروژه Notes را انتخاب کنید و روی آن راست کلیک کنید و Add> New File… را انتخاب کنید و در دیالوگ New File، Forms> FormsContentPage XAML را انتخاب کنید و نام فایل جدید را NotesPage بگذارید و New را بزنید.

این کار یک صفحه به نام NotesPage به root folder پروژه اضافه میکند که Root page پروژه خواهد بود.

１１. در NotesPage.xaml کد های موجود را حذف کنید و کد زیر را جایگزن کنید:

این کد UI صفحه را مشخص میکند که شامل یک ListView و یک ToolbarItem میباشد. List View از data binding برای نمایش هر یادداشتی که در اپلیکیشن بازیابی شود، استفاده میکند و با انتخاب یک یادداشت به NoteEntryPage منتقل میشود که یک یادداشت نمایش داده میشود. برای ایجاد یک یادداشت جدید میتوان به ToolbarItem مراجعه کرد. برای اطلاعات بیشترData binding را در بررسی عمیق ببینید. تغییرات را ذخیره کنید و فایل را ببندید.

１２. در NotesPage.xaml.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List();
    
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }

این کد عملکرد NotesPage را مشخص میکند. زمانی که صفحه نمایش داده میشود، OnAppearing متد اجرا میشودکه تمام یادداشت هایی که در local data dolder هستند را در ListView جمع میکند. زمانی که ToolbarItem کلیک میشود، OnNoteAddedClicked event handler اجرا میشود این متد ما را به NoteEntryPage منتقل میکند و BindingContext را برای NoteEnteyPage به یک Note جدید تغییر تنظیم میکند. زمانی که یک item از ListView انتخاب شود، OnListViewItemSelected event handler اجرا میشود. این متد ما را به NoteEntryPage منتقل میکند و BindingContext را برای NoteEntryPage به Note موجود برای آن صفحه تغییر میدهد. برای اطلاعات بیشتر Navigation را در بررسی عمیق مطآلعه کنید. تغییرات را ذخیره کنید و ازفایل خارج شوید.

１３. در Solution Pad روی App.Xamarin.cs دابل کلیک کنید تا باز شود و کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

        using System;
        using System.IO;
        using Xamarin.Forms;
        
        namespace Notes
        {
            public partial class App : Application
            {
                public static string FolderPath { get; private set; }
        
                public App()
                {
                    InitializeComponent();
                    FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                    MainPage = new NavigationPage(new NotesPage());
                }
                // ...
            }
        }
    

این کد namespace را System.IO namespace تعریف میکند و تعاریف static FolderPath را string را مشخص میکند. FolderPath برای ذخیره آدرسی که یادداشت ها در دستگاه در آن ذخیره میشوند، استفاده میشود همچنین این کد FolderPath را App constructor مقدار اولیه میدهد و مقدار اولیه MainPage را NavigationPage ، که نمونه ی NotesPage در آن قرار دارد، قرار میدهد. برای اطلاعات بیشتر بیشتر Navigation را در بررسی عمیق مطآلعه کنید. تغییرات را ذخیره کنید و فایل را ببندید.

１４. در Solution Pad در پروژه Notes، روی MainPage.xaml راست کلیک کنید و Remove را انتخاب کنید. در دیالوگی که ظاهر میشود، Delete را بزنید تا این فایل از هارد دیسک شما حذف شود. این کار صفحه هایی که استفاده نمیشوند را حذف میکند.

１５. پروژه را در هر پلتفرم Build و Run کنید. برای راهنمایی میتوانید به فایل قبل مراجعه کنید.(https://docs.microsoft.com/en-us/xamarin/get-started/quickstarts/single-page?pivots=macos#building-the-quickstart)

در NotesPage، دکمه + را بزنید تا به NotesEntryPage منتقل شوید و یک یادداشت وارد کنید. بعد از save یادداشت اپلیکیشن شما را به NotesPage باز میگرداند.

این کار را با تعدادی یادداشت با طول های مختلف انجام دهید و فعالیت اپلیکیشن را مشاهده کنید.